<template>
  <div>
    <div class="header fda">
      <div class="logotxt">
        <img src="../assets/xwylogo.png" alt="" />
        <span>江苏弦外音智造科技有限公司</span>
      </div>
      <div class="header_right fda">
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#000"
          text-color="#fff"
          active-text-color="#fff"
        >
          <el-menu-item index="1">
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">公司简介</el-menu-item>
          <el-menu-item index="3"
            ><router-link to="/give">服务内容</router-link></el-menu-item
          >
          <el-menu-item index="4">
            <router-link to="/excellentCase">成功案例</router-link>
          </el-menu-item>
          <el-menu-item index="5"
            ><router-link to="/cooperate?id=1"
              >合作机构</router-link
            ></el-menu-item
          >
          <el-menu-item index="6"
            ><router-link to="/news?id=1">新闻资讯</router-link></el-menu-item
          >
          <el-menu-item index="7">
            <router-link to="/contact?id=1">在线合作</router-link>
          </el-menu-item>
          <el-menu-item index="8">
            <router-link to="/legal">法务服务</router-link>
          </el-menu-item>
        </el-menu>
        <div class="put">
          <el-input placeholder="请输入内容" v-model="input4">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
      </div>
    </div>
    <div class="block">
      <el-carousel height="7rem" :autoplay="false">
        <el-carousel-item v-for="item in list" :key="item.id">
          <img style="width: 100%" :src="item.image" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="box">
      <div class="biaoti">
        <span style="margin-right: 0.24rem; font-weight: 600">服务内容</span
        ><span>/ service content</span>
      </div>
      <div class="yuan">
        <div class="yuan_left se1">
          <img src="../assets/yuan1.png" alt="" />
          <div class="yuan_right">
            <div class="name">项目申报答辩</div>
            <div class="neirong">
              主要为科研项目进行包装，制定申报方案，全程专人专享辅导及跟踪流程。模拟答辩流程，为优秀项目提供更多的保障。
            </div>
          </div>
        </div>
        <div class="yuanright se2">
          <div class="yuan_right">
            <div class="name" style="text-align: right;">定制软件开发</div>
            <div class="neirong">
              主要包括小程序、网站、saas、数字孪生等软硬件开发。从产品顾问到项目经理、UI设计师到开发，人员配套的专业开发团队为您提供优质的开发服务。
            </div>
          </div>
          <img src="../assets/yuan2.png" alt="" />
        </div>
      </div>
      <div class="yuan">
        <div class="yuan_left se3">
          <img src="../assets/yuan3.png" alt="" />
          <div class="yuan_right">
            <div class="name">耗材仪表代采</div>
            <div class="neirong">
              庞大的仪表代理渠道商，海量一手供应商资源整合，为你提供低价、性能高的优质代采服务。
            </div>
          </div>
        </div>
        <div class="yuanright se4">
          <div class="yuan_right">
            <div class="name" style="text-align: right;">科技成果转化</div>
            <div class="neirong">
              收集海量企业技术需求，扩展技术转移业务范围，配套服务站点，面向科技研发项目，组建专业团队、配套软硬件环境、合作专门资源、建设服务网络构建从研究、申报、小试、中试、结项到成果发布全过程的协同服务链条
            </div>
          </div>
          <img src="../assets/yuan4.png" alt="" />
        </div>
      </div>
      <div class="yuanmax">
        <img src="../assets/yuan5.png" alt="" />
        <div class="yuan_right">
          <div class="name">平面设计与制作</div>
          <div class="neirong">
            为科研单位材料制作赋能，从科研绘图，到建模到动画表达形式，原创设计师团队提供一站式服务。
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="fd nei">
        <div class="footer_left">
          <img src="../assets/logohui.png" class="logohui" alt="" />
          <p style="margin: 0.2rem auto">©江苏弦外音智造科技有限公司</p>
          <p>京ICP证888888号</p>
        </div>
        <div>
          <p style="font-size: 0.17rem; font-weight: 600">
           <a href="https://www.amap.com/search?query=%E5%8D%97%E4%BA%AC%E5%B8%82%E6%A0%96%E9%9C%9E%E5%8C%BA%E5%85%B4%E6%99%BA%E7%A7%91%E6%8A%80%E5%9B%ADA%E5%BA%A711%E6%A5%BC&city=320000&geoobj=117.784963%7C31.496393%7C120.311263%7C32.627805&zoom=9.65">地址：南京市栖霞区兴智科技园A座11楼</a> 
          </p>
          <p style="margin: 0.14rem auto">
            微信：19996669669
          </p>
          <p><a href="tel:19996669669">全国24小时服务热线：199 9666 9669</a></p>
          <p style="margin-top: 0.13rem"><a href="https://mail.163.com/">商务合作邮箱：m19996669669@163.com</a> </p>
        </div>
        <div>
          <img class="footer_ma" src="../assets/ma.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
   
  <script>
import { banner, config } from "@/api/user";
export default {
  data() {
    return {
      list: [],
      aa: "color:red",
      input4: "",
      queryForm: {
        type: 1,
      },
      content: "",
    };
  },
  created() {},
  mounted() {
    banner(this.queryForm).then((response) => {
      console.log(response);
      this.list = response.rows;
    });

    config().then((response) => {
      console.log(response.data);
      this.content = response.data;
    });
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 返回上一层
    go() {
      this.$router.go(-1);
    },
    // // 查看用户
    handleCha() {
      this.$router.push({
        name: "/school",
        // query: { classId: row.id, schoolId: row.schoolId, name: row.name },
      });
    },
  },
};
</script>
   
  <style  lang="less" scoped>
.se1 {
  background-color: rgb(128, 159, 180);
}
.se2 {
  background-color: rgb(127, 138, 146);
}
.se3 {
  background-color: rgb(203, 171, 179);
}
.se4 {
  background-color: rgb(128, 156, 172);
}
.yuan {
  width: 90%;
  margin: 0 auto;
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  .yuan_left {
    width: 49%;
    display: flex;
    padding: 0.35rem 0.47rem;
    border-top-left-radius: 1.46rem;
    border-bottom-left-radius: 1.46rem;
    box-sizing: border-box;
    img {
      width: 3.44rem;
      height: 2.22rem;
    }
    .yuan_right {
      margin-left: 0.18rem;
      .name {
        font-size: 0.28rem;
        margin-bottom: 0.3rem;
      }
      .neirong {
        font-size: 0.2rem;
        color: #fff;
      }
    }
  }
  .yuanright {
    width: 49%;
    display: flex;
    padding: 0.35rem 0.47rem;
    border-top-right-radius: 1.46rem;
    border-bottom-right-radius: 1.46rem;
    box-sizing: border-box;
    img {
      width: 3.44rem;
      height: 2.22rem;
      margin-left: 0.18rem;
    }
    .yuan_right {
      .name {
        font-size: 0.28rem;
        margin-bottom: 0.3rem;
      }
      .neirong {
        font-size: 0.2rem;
        color: #fff;
      }
    }
  }
}
.yuanmax {
  width: 90%;
  margin: 0 auto;
  padding: 0.35rem 0.47rem;
  box-sizing: border-box;
  background-color: #b3a8a2;
  border-radius: 1.46rem;
  margin-top: 0.48rem;
  display: flex;
  img {
    width: 3.44rem;
    height: 2.22rem;
  }
  .yuan_right {
    margin-left: 0.18rem;
    .name {
      font-size: 0.28rem;
      margin-bottom: 0.3rem;
    }
    .neirong {
      font-size: 0.2rem;
      color: #fff;
    }
  }
}
/deep/.el-menu-item {
  font-size: 0.14rem;
  padding: 0 0.2rem;
  cursor: pointer;
}
/deep/.el-input__inner {
  border-radius: 1rem !important;
}
/deep/.el-submenu__title {
  font-size: 0.14rem;
  color: #303133;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
}
/deep/.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 0.6rem;
  line-height: 0.6rem;
  margin: 0;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
/deep/.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 0.6rem;
  line-height: 0.6rem;
  border-bottom: 0.02rem solid transparent;
  color: #909399;
}
.el-menu.el-menu--horizontal {
  border: none !important;
}
.el-input__inner {
  border-radius: 1rem !important;
}
.header {
  width: 100%;
  padding: 0.19rem 0.32rem;
  box-sizing: border-box;
  background-color: #000000;
  color: #fff;
  .logotxt {
    display: flex;
    align-items: center;
    font-size: 0.26rem;
    font-weight: 600;
    img {
      width: 0.44rem;
      margin-right: 0.12rem;
    }
  }
  .header_right {
    .put {
      width: 1.8rem;
      display: flex;
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 0.14rem;
  opacity: 0.75;
  line-height: 1.5rem;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.box {
  padding: 0.76rem 0 0.6rem 0;
  box-sizing: border-box;
  .biaoti {
    font-size: 0.32rem;
    text-align: center;
  }
}

.fd {
  display: flex;
  justify-content: space-between;
}
.fda {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer {
  width: 100%;
  background-color: #f6f6f6;
  padding: 0.54rem 0;
  box-sizing: border-box;
}
.nei {
  width: 70%;
  margin: 0 auto;
  text-align: left;
  color: #484848;
  font-size: 0.15rem;
}

.footer_ma {
  width: 1.2rem;
}
.logohui {
  width: 0.56rem;
  max-width: 0.56rem;
}
</style>